<template>
    <div>
        <!-- 搜索框 -->
        <div class="search_wrap">
            <div class="search">
                <i class="iconfont icon-sousuo"></i>
                <input
                    v-model="keyword"
                    type="text"
                    placeholder="200000+免费模板任你搜索"
                    @keyup.enter="search"
                    :immediate-check="false"
                />
                <button v-show="cancelFlag" @click="clear">x</button>
            </div>
            <button @click="$router.go(-1)">取消</button>
        </div>
        <div class="main">
            <div class="wrap" v-show="show">
                <div class="hot_wrap" v-show="show">
                    <h3>热门搜索</h3>
                    <ul class="hotList">
                        <li v-for="item in hotList" :key="item.keyword">
                            <button @click="searchKeyWord(item.keyword)">
                                {{ item.keyword }}
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="history_wrap">
                    <h3>
                        历史搜索<span @click="clearStorage">清空历史记录</span>
                    </h3>
                    <ul class="history">
                        <li v-for="item in history[0]" :key="item">
                            <button @click="searchKeyWord(item)">
                                {{ item }}
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content" v-show="!show">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <div class="scene_nav">
                        <div class="nav_list">
                            <span
                                :class="{ active: num == 0 }"
                                @click="change(0, 0, 'all')"
                                >全部</span
                            >
                            <span
                                @click="change(item.kindId, index)"
                                :class="{ active: num == index + 1 }"
                                v-for="(item, index) in titleList"
                                :key="item.kindId"
                                >{{ item.kindTitle }}</span
                            >
                        </div>
                    </div>
                    <div class="filter">
                        <h1 class="total">{{ total }}个模板</h1>
                        <p>
                            <span
                                v-for="(item, index) in order"
                                :key="item"
                                :style="{
                                    color: hotNum == index ? 'red' : 'black',
                                }"
                                @click="filterClick(index)"
                                >{{ item }}</span
                            >
                        </p>
                    </div>
                    <water-list :list="imgList" :total="total"></water-list>
                </van-list>
            </div>
        </div>
        <!-- 返回顶部 -->
        <BackTop :height="100">
            <div id="backTop">
                <i class="iconfont icon-shang goback_icon"></i>
            </div>
        </BackTop>
    </div>
</template>
<script>
import waterList from "@/components/waterList";
import fet from "@/api";
export default {
    components: {
        waterList,
    },
    data() {
        return {
            keyword: "",
            titleList: [],
            hotList: [],
            order: ["最新", "最热"],
            hotNum: 0,
            show: true,
            cancelFlag: false,
            num: 0,
            imgList: [],
            kindId: 0,
            page: 1,
            total: 0,
            loading: false, // 是否处于触底加载状态
            finished: false, // 是否已加载完成
            history: [],
        };
    },
    watch: {
        keyword() {
            if (this.keyword.length == 0) {
                this.show = true;
                this.cancelFlag = false;
            } else {
                this.cancelFlag = true;
            }
        },
    },
    created() {
        this.getHotList();
        this.getTitleList();
    },
    methods: {
        //历史搜索
        getStorage() {
            let Data = this.keyword;
            sessionStorage.setItem(Data, Data);
            this.history = [];
            //判断缓存中是否有值
            if (sessionStorage.length != null) {
                let str = Object.keys(sessionStorage);
                this.history.push(str);
            } else {
                this.history = [];
            }
            // console.log(this.history);
        },
        // 清空缓存
        clearStorage() {
            sessionStorage.clear();
            this.history = [];
        },
        // 切换最新最热
        filterClick(index) {
            this.hotNum = index;
            this.imgList = [];
            this.search();
        },
        //切换分类
        change(kindId, index, all) {
            if (all) {
                this.num = 0;
            } else {
                this.num = index + 1;
            }
            this.kindId = kindId;
            this.imgList = [];
            this.page = 1;
            this.search(1);
        },
        clear() {
            this.keyword = "";
        },
        // 热门搜索
        searchKeyWord(key_word) {
            this.show = false;
            this.keyword = key_word;
            this.imgList = [];
            this.page = 1;
            this.search();
            this.getStorage();
        },
        async onLoad() {
            this.page++;
            // console.log("触底"+this.page);
            this.loading = true;
            let res = await fet(
                "/template/wxSmallAppSearch.do?_dataType=json",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    body: `_dataClientType=3&client_type=40&pageNo=${this.page}&pageSize=20&kw=${this.keyword}&second_kind_id=${this.kindId}&time_order=0&use_times_order=0&collection_times_order=0`,
                }
            );
            // console.log(res.body.templates);
            this.imgList.push(...res.body.templates);
            console.log(this.imgList);
            this.loading = false;
            if (res.body.templates == "") {
                this.finished = true;
            }
        },
        async search(a) {
            this.getStorage();
            // 多次复用此方法
            // 点击按钮进入、回车进入 默认在全部范围内搜索
            if (a !== 1) {
                this.kindId = 0;
                this.num = 0;
            }
            //根据关键词请求数据
            // alert(this.keyword);
            this.show = false;
            let res = await fet(
                "/template/wxSmallAppSearch.do?_dataType=json",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    body: `_dataClientType=3&client_type=40&pageNo=${this.page}&pageSize=20&kw=${this.keyword}&second_kind_id=${this.kindId}&time_order=${this.hotNum}&use_times_order=0&collection_times_order=0`,
                }
            );
            // console.log(res);
            this.total = res.body.totalCount;
            this.imgList.push(...res.body.templates);
        },
        async getHotList() {
            let res = await fet(
                `/template/getRecommendKeyword.do?_dataType=json`,
                {
                    method: "POST",
                    Headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    body: `dataClientType=3&client_type=40&from=1`,
                }
            );
            // console.log(res);
            this.hotList = res.body.data;
            // console.log(this.hotList);
        },
        async getTitleList() {
            // 请求顶部分类标题
            let res = await fet(
                "/designkind/getDesignKindBasicInfo.do?_dataType=json",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    body: "_dataClientType=3&client_type=40&type=2",
                }
            );
            this.titleList = [...res.body.data.secondLabel];
            // console.log(this.titleList);
        },
    },
};
</script>
<style lang="scss" scoped>
div {
    .search_wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0.2rem;
        background-color: #fff;
        z-index: 22;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .search {
            width: 6rem;
            // height: 0.6rem;
            // line-height: 0.6rem;
            font-size: 0.3rem;
            color: #666;
            border-radius: 0.5rem;
            background-color: #f5f5f5;
            position: relative;
            i {
                font-size: 0.3rem;
                padding-left: 0.3rem;
            }
            input {
                font-size: 0.28rem;
                width: 4.8rem;
                height: 0.8rem;
                line-height: 0.8rem;
                text-indent: 0.1rem;
                outline: 0;
                border: none;
                background-color: #f5f5f5;
            }
            button {
                display: block;
                width: 0.4rem;
                height: 0.4rem;
                line-height: 0.4rem;
                text-align: center;
                position: absolute;
                top: 0.2rem;
                right: 0.2rem;
                background-color: #dedede;
                color: white;
                border-radius: 50%;
            }
        }
        button {
            display: block;
            height: 0.8rem;
            line-height: 0.8rem;
            padding: 0 0.1rem;
            border: none;
            outline: 0;
            cursor: pointer;
            background-color: #fff;
            font-size: 0.26rem;
        }
    }
    .main {
        padding-top: 1.2rem;
        .wrap {
            padding: 0.2rem;
            // background-color: skyblue;
            h3 {
                font-size: 0.3rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.2rem 0;
                span {
                    font-size: 0.26rem;
                    color: #666;
                }
            }
            .hotList,
            .history {
                display: flex;
                flex-wrap: wrap;
                li {
                    margin: 0.1rem 0.2rem 0.1rem 0;
                }
                button {
                    border: none;
                    padding: 0.2rem 0.3rem;
                    border-radius: 0.3rem;
                    font-size: 0.2rem;
                    color: #333;
                    background-color: #f5f5f5;
                }
            }
        }
        .scene_nav {
            overflow: auto;
            border-bottom: 0.01rem solid #dedede;
            .nav_list {
                line-height: 0.6rem;
                white-space: nowrap;
                font-size: 0.3rem;
                span {
                    display: inline-block;
                    padding: 0.1rem 0;
                    margin: 0 0.2rem;
                    border-bottom: 0.05rem solid transparent;
                }
                .active {
                    font-weight: bolder;
                    border-bottom: 0.05rem solid blue;
                }
            }
        }
        .filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.2rem 0 0.2rem;
            h1 {
                font-size: 0.35rem;
            }
            span {
                padding-right: 0.1rem;
                font-size: 0.28rem;
            }
        }
    }
    ::-webkit-scrollbar {
        width: 0;
        display: none;
    }
}
</style>